<template>
	<view class="container">
		<view class="status back_ground">
             <view class="status_top back_ground">预约状态</view>
			 <view class="status_bottom">已取消</view>
		</view>
		<view class="info back_ground">
			<view class="status_top">预约信息</view>
			<view class="status_middle">
				<view class="info_item">
					<view class="icon" style="background-image: url('https://img.aibbyp.com/wechat/images/call/detail/user.png');"></view>
					<view class="item_info">183******56</view>
				</view>
				<view class="info_item" style="margin-top: 4%;">
					<view class="icon" style="background-image: url('https://img.aibbyp.com/wechat/images/call/detail/dress.png');"></view>
					<view class="item_info">四川省成都市青羊区时代凯悦大厦</view>
				</view>
				<view class="info_item" style="margin-top: 4%;">
					<view class="icon" style="background-image: url('https://img.aibbyp.com/wechat/images/call/detail/banshou.png');"></view>
					<view class="item_info">拆除</view>
				</view>
			</view>
			<view class="info_time_line">
				<view class="time_line_title">
					<view class="time_line_rand">
						<view class="time_line_rand_drop" style="background: linear-gradient(143deg, #E5E5E5 25%, #B2B2B2 93%);"></view>
					</view>
					<view class="time_line_title time_line_margin">预约单提交</view>
					<view class="time_line_time time_line_margin">2023-11-20 16:58:02</view>
				</view>
				<view class="time_line_desc">
					提交成功，工匠将尽快与您取得联系
				</view>
				<view class="time_line_title">
					<view class="time_line_rand">
						<view class="time_line_rand_drop last_time_line_rand_drop" style="background: linear-gradient(143deg, #FFDEBC 25%, #FF4530 93%);"></view>
					</view>
					<view class="time_line_title time_line_margin">预约单提交</view>
					<view class="time_line_time time_line_margin">2023-11-20 16:58:02</view>
				</view>
				<view class="time_line_desc">
					提交成功，工匠将尽快与您取得联系
				</view>
			</view>
			<view>
				<button class="cu-btn round lg info_btn">重新预约</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.back_ground{
		background: #FFFFFF;
		width: 100%;
	}
	.container {
		padding: 1% 4%;
	}
	.status {	
		margin-top: 5%;
		height: 260upx;
		/* border: 1px solid black; */
		border-radius: 10px;
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		padding: 20upx;
	}
	.status_top {
		height: 75upx;
		border-bottom:1px solid #F5F5F5;
		display: flex;
		flex-direction: row;
		line-height: 75upx;
		font-family: Source Han Sans;
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #333333;
	}
	.status_bottom {
		margin:0 auto;
		line-height: 155upx;
		font-family: Source Han Sans;
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #666666;
	}
	.info {
		margin-top: 2%;
		border-radius: 10px;
		padding: 20upx;
	}
	.status_middle {
		margin-top: 30upx;
		width: 100%;
		height: 220upx;
		border-radius: 10px;
		padding: 4%;
		background-color: #F5F5F5;
	}
	.info_item {
		display: flex;
		flex-direction: row;
	}
	.icon {
		height: 40upx;
		width: 40upx;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.item_info {
		margin-left: 3%;
		font-family: Source Han Sans;
		font-size: 13px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #666666;
		z-index: 1;
	}
	.info_time_line {
		margin-top: 5%;
	}
	.time_line_rand_drop{
		margin-top: 120%;
		border-radius: 50%;
		width: 10px;
		height: 10px;
		opacity: 1;
		box-shadow: 1px 2px 10px 0px rgba(153, 153, 153, 0.5);
		background-position: 50%;
	}
	.last_time_line_rand_drop {
		box-shadow: 1px 2px 10px 0px rgba(255, 69, 48, 0.5);
	}
	.time_line_title {
		margin-top: 2%;
		display: flex;
		flex: row;
		font-family: Source Han Sans;
		font-size: 14px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #333333;
		z-index: 0;
	}
	.time_line_margin {
		margin-left: 3%;
	}
	.time_line_time {
		padding-top: 2%;
		font-family: Source Han Sans;
		font-size: 12px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		z-index: 1;
		color: #999999;
		width: 69%;
		text-align: right;
	}
	.time_line_desc {
		margin-left: 1.5%;
		margin-top: 2%;
		padding-top: 1.5%;
		padding-left: 4%;
		width: 100%;
		height: 65upx;
		font-family: Source Han Sans;
		font-size: 13px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #999999;
		z-index: 1;
		border-left: 1px solid #FFEFED;
	}
	.info_btn {
		margin-top: 15%;
		width: 100%;
		background-color: #FE8913;
		font-family: Source Han Sans;
		font-size: 15px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #FFFFFF;
		z-index: 0;
	}
</style>